<!--刘崇华-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>页面2</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <script src="css/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="css/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/page2.css" />
</head>

<body id="by">
<img src="img/bg.jpg" id="pg">
<!-- logo部分 -->
<div id="logo">
    <img id="bg" src="img/21天习惯养成logo.png">
</div>

<!-- 主体内容 -->
<div id="app" class="container">
    <div class="row">
        <!--图片 -->
        <div class="col-md-3">

        </div>
        <!-- 注册部分 -->
        <div class="col-md-9" id="k">
            <!-- 注册主体 -->
            <div class="col-md-6 col-md-offset-4">
                <h1 id="h1">欢迎注册</h1>
                <h3>带你养成一个良好的习惯</h3>
                <!-- 表单 -->
                <div id="k1">
                    <form method="post">
                        <!-- 用户名 -->
                        <div class="form-group">
                            <input type="text" v-model="name" placeholder="用户名" class="form-control input-lg" v-on:click="empty()" />
                            <p class="help-block" style="color: #f66;">{{namemsg}}</p>
                        </div>
                        <!-- 密码 -->
                        <div class="form-group">
                            <input type="password" v-model="pass" placeholder="密码" class="form-control input-lg" v-on:click="empty()"/>
                            <p class="help-block" style="color: #f66;">{{psmsg}}</p>
                        </div>
                        <!-- 确认密码 -->
                        <div class="form-group">
                            <input type="password" v-model="pass2" placeholder="确认密码" class="form-control input-lg" v-on:click="empty()"/>
                            <p class="help-block" style="color: #f66;">{{ps2msg}}</p>
                        </div>
                        <!-- 手机号 -->
                        <div class="form-group">
                            <input type="text" v-model="phone" placeholder="手机号码" class="form-control input-lg" v-on:click="empty()"/>
                            <p class="help-block" style="color: #f66;">{{phmsg}}</p>
                        </div>
                        <!-- 验证码 -->
                        <div class="form-group">
                            <input type="text" v-model="yzm" placeholder="填写验证码" class="form-control input-lg" v-on:click="empty()"/>
                            <p class="help-block" style="color: #f66;">{{yzmmsg}}</p>
                            <!-- 验证码 -->
                            <img id="yzm" src="img/2018-09-04_003329.png">
                        </div>
                        <button type="button" class="btn btn-info btn-lg btn-block" @click="login()">注册</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="foot">
    <div class="text-center" style="padding-top:20px ;">
        关于项目 | 服务条款 | 隐私政策 | 客服中心 | 联系我们 | 帮助中心
    </div>
</div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            name: '',
            pass: '',
            pass2: '',
            phone: '',
            yzm: '',
            namemsg: '',
            psmsg: '',
            ps2msg: '',
            phmsg: '',
            yzmmsg: '',
        },
        methods: {
            login: function () {
                if (this.name == '') {
                    this.namemsg = '姓名不能为空';
                }
                if (this.pass == '') {
                    this.psmsg = '密码不能为空';
                }
                if (this.pass2 == '') {
                    this.ps2msg = '密码不能为空';
                }
                if (this.phone == '') {
                    this.phmsg = '手机号不能为空';
                }
                if (this.yzm == '') {
                    this.yzmmsg = '验证码不能为空';
                }
            },
            empty: function () {
                this.namemsg = '';
                this.psmsg = '';
                this.ps2msg = '';
                this.phmsg = '';
                this.yzmmsg = '';
            }
        },
        mounted: function () {

        }
    });
</script>

</html>
